<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
</head>

<body>
<span id="sp"> 孙雨雨</span>

<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
姓名：<input type="text" name="username"/><br>
<button type="button" id="show1">显示</button>
<button type="button" id="hide1">隐藏</button>
<script type="text/javascript">
    $(function () {
        //alert(""这是jquery的hello wrod!");
        //通过id获取元素
        // alert($("#sp").text());
        //标签元素选择器
        // alert($("span").text());
        //隐藏所有p标签的元素
        $("p").hide();

        //当鼠标单击button按钮的时候触发这个方法
        $("#show1").click(function () {
            //显示所有p标签元素
            $("p").show();
        });

        //当鼠标单击button
        $("#hide1").click(function () {
            $("p").hide();
        });

        //姓名输入框的内容改变事件
       $("[name='username']").change(function () {
        alert("姓名发生改变了")
       });
    })
</script>
</body>
</html>